require(["config"],function(){
	
	require(["jquery","header","nav"],function($,header,nav){
		
		
		//请求服务器数据,生成网页内容
		$.ajax({
			url:"data_json/data_index.json",
			type:"get",
			dataType:"json",
			success: function(res){
				//加载common.html中通用型网页元素
				$("#header").load("htmls/common.html .header",function(){
					header.init(res);
				});
				$("#nav").load("htmls/common.html .nav",function(){
					nav.init(res);
				});
				$("#footer").load("htmls/common.html .footer");
				
				//给页面元素绑定事件
				eventBind();
			}
		});
		
		
		
		//定义需要使用的变量,显示的当前页,每页展示的数量,总页数
		var currentPage = 1;
		var pageNumber = 20;
		var totalPage = 0;
		var data = {};
		//请求数据,动态生成商品列表页
		$.ajax({
			type:"get",
			url:"data_json/data_list_of_goods.json",
			async:true,
			success:function(res){
				data = res.goodsList;
				totalPage = Math.ceil(res.goodsList.length/pageNumber);
				console.log("一共"+res.goodsList.length+"条数据");
				goodsShow();
			}
		});
		
		
		
		
		//生成商品列表函数
		function goodsShow(){
			var goods = $(".goods .goods_items");
			var html = "";
			for(var i=(currentPage-1)*pageNumber;i<currentPage*pageNumber;i++){
				if(i<data.length){
//					拯救者 R720-15IKB 15.6英寸游戏<em>笔记本</em> 黑色 80WW000WCD				
					html += `<li class="goods_item">
								<a href="javascript:;"><img src="${data[i].src}" alt="" /></a>
								<p class="item_name"><a href="javascript:;">${data[i].goodsName}</a></p>
								<p class="item_introduce">${data[i].goodsIntroduce}</p>
								<p class="item_price">商城价: ${data[i].goodPrice}</p>
								<p class="btns">
									<a href="javascript:;" class="btn">查看详情</a>
									<a href="javascript:;" class="btn iconfont icon-xin">收藏</a>
								</p>
							</li>`
				}
			}
			
			goods.html(html);
			pageShow();
		}
		
		//page页数和按钮的展示
		function pageShow(){
			
			var page = $(".page_container");
			page.find(".page_current").text(currentPage);
			page.find(".page_totle").text(totalPage);
			
			$(".total_entries").text(data.length);
			
		}
		
		
		
		//绑定事件集合函数
		function eventBind(){
			//更多选项和收起按钮点击事件
			$(".more_options").css({
				top:(parseInt($(".more_options").css("top"))-1)+"px"
			}).on("click",function(){
				$(".options2").toggle();
				//,父元素高度改变后,获取父元素高度,设置给button
				var height = $(".more_options").parent().height();
				if($(this).text() == "更多选项"){
					$(this).css({top:height-1}).text("收起");
				}else{
					$(this).css({top:height-1}).text("更多选项");
				}
				
				
			});
			
			//页面生成后,给各元素添加点击事件
			$(".btn_more").on("click",function(){
				$(".confirm").eq($(this).index(".btn_more")).toggle();
			
				if($(".confirm").eq($(this).index(".btn_more")).css("display") == "none"){
					//如果不显示多选按钮,高度为48px
					$(this).parent().css({
						height:"48px"
					}).find(".check").hide();
				}else{
					//如果让多选按钮显示,高度为96px
					$(this).parent().css({
						height:"96px"
					}).find(".check").show();
					
				}
				var height = $(".more_options").parent().height();
				$(".more_options").css({
					top:height-1
				});
				
			});
			
			//page按钮点击事件
			$(".page_container").find(".page_btn").on("click",function(){
				switch($(this).index(".page_btn")){
					case 0:
						//表示点击了首页
						currentPage = 1;
						goodsShow();
					break;
					case 1:
						if(currentPage>1){
							currentPage --;
						}else{
							currentPage = 1;
						}
						goodsShow();
					break;
					case 2:
						if(currentPage<totalPage){
							currentPage ++;
						}else{
							currentPage = totalPage;
						}
						goodsShow();
					break;
					case 3:
						currentPage = totalPage;
						goodsShow();
					break;
				}
			})
			
		}
		
	})
})
